<template>
	<view>
		<view v-if="!hid" class="flex-row-center" :style="{ top: scHight }"
			style="width: 750rpx; position: fixed; z-index: 100; left: 0">
			<view class="flex-column-center" style="background-color: #fcfcfc; padding: 30rpx; border-radius: 10rpx">
				<movable-area class="flex" style="width: 100%" animation="false" :style="{ height: originalHeight }">
					<movable-view scale-value="1" animation="false" damping="5000" :x="moveX" :style="{
              height: sliderHeight,
              width: sliderWidth,
              'z-index': 101,
            }" direction="horizontal">
						<image :src="imgbk" class="image" mode="aspectFit" :style="{
                height: sliderHeight,
                width: sliderWidth,
                'margin-top': imgbKH,
              }"></image>
					</movable-view>
					<image :src="img" mode="aspectFit" :style="{ height: originalHeight, width: originalWidth }"
						style="border-radius: 10rpx"></image>
				</movable-area>

				<movable-area class="flex-row-start" style="
            width: 100%;
            background-color: #efefef;
            height: 80rpx;
            border-radius: 40rpx;
            margin-top: 30rpx;
          ">
					<movable-view scale-value="1" animation="false" damping="50" :x="movePv" class="flex-row-center"
						style="
              border-radius: 50%;
              height: 100rpx;
              width: 100rpx;
              background-color: #ffffff;
              border: 2rpx solid #e3e3e3;
              margin-top: -13rpx;
            " direction="horizontal" @change="moveChange" @touchend="end">
						<u-icon :color="mainColor" size="40" v-if="endLoad" name="arrow-right"></u-icon>
						<u-icon :color="mainColor" size="40" v-else name="reload"></u-icon>
					</movable-view>

					<text style="padding-left: 140rpx" :style="{ color: col }">{{
            hasImg
          }}</text>
				</movable-area>
				<view class="flex-row-around padding-top" style="width: 100%">
					<u-icon @click="hide" :color="mainColor" size="40" name="close"></u-icon>

					<text class="cu-tag round" @click="getCode">刷新拼图</text>
					<text class="my-neirong-sm cuIcon-safe" style="color: #c1c1c1">Lili-FRAMEWORK</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from "@/config/api.js";
	import storage from "@/utils/storage.js";
	import uuid from "@/utils/uuid.modified.js";
	const phone = uni.getSystemInfoSync();
	const l = phone.screenWidth / 750;
	export default {
		name: "verification",
		created() {
			// 可自行调整
			this.scHight = phone.screenHeight / 2 - 200 + "px";
			this.getCode();
		},
		props: {
			height: {
				type: String,
				default: "80rpx",
			},
			width: {
				type: String,
				default: "350rpx",
			},
			left: {
				type: String,
				default: "180rpx",
			},
			top: {
				type: String,
				default: "30rpx",
			},
			business: {
				type: String,
				default: "LOGIN",
			},
		},
		data() {
			return {
				mainColor: this.$mainColor,
				flage: false,
				key: "", //key
				vsrtx: "点击进行验证", //按钮提示语
				vsr: false, //
				hid: true,
				col: "#838383",
				movePv: 0,
				hasImg: "拖动滑块已完成拼图",
				spcode: "",
				tl: 0,
				moveCode: 0,
				//X轴移动距离
				moveX: 0,
				//模版高度
				originalHeight: "",
				//模版宽度
				originalWidth: "",
				//拼图高度
				sliderHeight: "",
				//平涂宽度
				sliderWidth: "",
				scHight: 0,
				//原图
				img: "",
				//拼图
				imgbk: "",
				endLoad: true,
				imgbKH: "",
			};
		},
		methods: {
			show() {
				this.hid = false;
			},
			hide() {
				if (!this.vsr) {
					// vsr判断是否验证成功，成功隐藏验证框
					this.hid = !this.hid;
				}
			},
			error() {
				this.vsr = false;
				this.hid = false;
				this.moveX = 0;
				this.moveCode = 0;
			},
			// 获取验证图片
			getCode() {
				this.col = "#b3afae";
				this.hasImg = "图片加载中...";
				if (!storage.getUuid()) {
					storage.setUuid(uuid.v1());
				}
				uni.request({
					url: api.common + "/common/slider/" + this.business,
					header: {
						uuid: storage.getUuid(),
					},
					success: (res) => {
						this.col = "#838383";
						this.hasImg = "拖动滑块以完成拼图";
						var data = res.data.result;

						// base64的图片
						this.img = data.backImage;
						this.imgbk = data.slidingImage;
						// 根据参数动态适应验证图片的高宽
						this.imgbKH = data.randomY * 1.8 + "rpx";
						this.originalHeight = data.originalHeight * 1.8 + "rpx";
						this.originalWidth = data.originalWidth * 1.8 + "rpx";
						this.sliderHeight = data.sliderHeight * 1.8 + "rpx";
						this.sliderWidth = data.sliderWidth * 1.8 + "rpx";
						// 适应比率，用来适应滑动距离
						this.tl = 1 / (1.8 * l);
						// 无用信息
						this.spcode = data.capcode;
						// 验证令牌
						this.key = data.key;
						this.$store.state.verificationKey = data.key;
					},
				});
			},
			end(e) {
				this.endLoad = false;
				// 验证拼图位置是否正确
				uni.request({
					method: "POST",
					url: api.common +
						"/common/slider/" +
						this.business +
						"?xPos=" +
						parseInt(this.moveCode * this.tl),
					header: {
						uuid: storage.getUuid(),
					},
					success: (res) => {
						this.endLoad = true;
						res.data.result == false ?
							(res.data.result = false) :
							(res.data.result = true);

						if (res.data && res.data.result) {
							//验证成功后把key发送出去,后端会把验证信息存在缓存里
							this.$emit("send", this.key);
							this.hide();
							this.vsr = true;
							this.vsrtx = "已通过验证";
						} else {
							this.getCode(); // 让滑块回到起始位置
							if (this.movePv == 1) {
								this.movePv = 0;
							} else {
								this.movePv = 1;
							}
						}
					},
					fail: (res) => {
						this.$msg("连接服务器失败");
					},
				});
			},
			// 绑定拼图位置
			moveChange(e) {
				this.moveX = e.detail.x;
				this.moveCode = e.detail.x;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "./animation.css";
	@import "./icon.css";

	// @import './main.css';
	.dh-wt {
		animation: at 1.1s ease;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		background-color: $main-color;
		border-radius: 50%;
	}

	@keyframes at {
		from {
			width: 27rpx;
			height: 27rpx;
		}

		to {
			width: 45rpx;
			height: 45rpx;
		}
	}

	.ttcl {
		color: $main-color;
	}

	.border-index {
		border: 1rpx solid $main-color;
	}

	.status_bar {
		height: var(--status-bar-height);
		background-color: #f1f1f1;
		width: 100%;
	}

	.status_bar-nobg {
		height: var(--status-bar-height);
		width: 100%;
	}

	/* 转圈动画 */
	.turn-load {
		animation: turnmy 1s linear infinite;
	}

	@keyframes turnmy {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	.status_bar-fixed {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #f1f1f1;
		z-index: 20;
	}

	.head-dh-my {
		display: flex;
		position: fixed;
		justify-content: space-around;
		align-items: flex-end;
		padding-bottom: 10rpx;
		z-index: 15;
		background-color: #e3e3e3;
		width: 750rpx;
	}

	.padding-left {
		padding-left: 20rpx;
	}

	.padding-left-top {
		padding-left: 20rpx;
		padding-top: 20rpx;
	}

	.padding-right {
		padding-right: 20rpx;
	}

	.input-my {
		padding-left: 20rpx;
		border-radius: 40rpx;
		height: 50rpx;
		margin: 10rpx;
	}

	.tb-tag-absolute {
		position: absolute;
		z-index: 5;
		border-radius: 25rpx;
		font-size: 16rpx;
		margin-left: 25rpx;
		margin-top: -35rpx;
	}

	.flex-column-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.flex-column-between {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}

	.flex-column-start {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.flex-column-around {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.flex-row-start {
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.flex-row-around {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}

	.flex-row-center {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.flex-row-between {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.my-title {
		font-size: 35rpx;
		font-weight: bold;
	}

	.my-neirong {
		font-size: 26rpx;
		color: #6d6d6d;
	}

	.my-neirong-sm {
		font-size: 23rpx;
		color: #616161;
	}

	.my-tag-text {
		font-size: 22rpx;
		padding-top: 20rpx;
		color: #bababa;
	}

	.padding-top {
		padding-top: 35rpx;
	}

	.padding-top-sm {
		padding-top: 20rpx;
	}

	.bottom-dh {
		background-color: #f1f1f1;
		position: fixed;
		z-index: 10;
		bottom: 0;
		width: 750rpx;
		height: 110rpx;
	}

	.tb-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.bottom-text {
		width: 750rpx;
		position: fixed;
		text-align: center;
		font-size: 26rpx;
		color: #9d9d9d;
		bottom: 70rpx;
	}

	.moneycolor {
		color: #ea5002;
	}

	.margin-top {
		margin-top: 20rpx;
	}

	.margin-top-sm {
		margin-top: 12rpx;
	}

	.margin {
		margin: 20rpx;
	}

	.margin-left {
		margin-left: 20rpx;
	}

	.margin-right {
		margin-right: 20rpx;
	}

	.main-color {
		color: #07d188;
	}
</style>